// useCallback :缓存的是函数，不使用这个的话父组件每次更新子组件都会重新渲染
// memo: 记忆组件  + useCallback设置成缓存函数
import {useCallback, useState , memo} from "react"
const Child = memo(function ({onClick}){
    console.log("子组件重新渲染")
    return (
        <div>
            <button onClick={onClick}>子组件</button>
        </div>
    )
})
export default function UseCallback(){
    const [count,setCount] = useState(0)
    const handleDecrement = ()=>{setCount(count+1)}
    const handleClick = useCallback(()=>{
        console.log("子组件点击")
    },[])
    return (
        <div style={{padding:10}}>
            <span>Count:{count} </span>
            <p></p>
            <button onClick={handleDecrement}>更新</button>
            <p></p>
            <Child onClick={handleClick}></Child>
        </div>
    )
}